import React, { MouseEvent, useCallback } from 'react'
import './menu.scss'
import SVG from '../SVG';

import classNames from 'classnames';
import { Link } from 'react-router-dom';
interface IMenu {
    menuList: Array<any>,
    defaultKeys: Array<string>,
    openKeys: (key: Array<string>) => void,
    onOpenChange: (key: Array<string>) => void
}
function Menu(props: IMenu) {
    const { menuList, defaultKeys, openKeys, onOpenChange } = props;
    const defaultKey = defaultKeys[0];

    // 展开收缩节点
    const onMenuClicked = (e: MouseEvent) => {
        const node: any = e.currentTarget;
        const subMenu: any = node.nextElementSibling;
        let nodes = document.getElementsByClassName('menu-item');

        for (let i = 0; i < nodes.length; i++) {
            nodes[i].classList.remove('active-item');
        }
        node.classList.add("active-item")
        if (subMenu) {
            subMenu.style.display === 'none' ? subMenu.style.display = 'block' : subMenu.style.display = 'none';
        }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const clickKeys = (e: MouseEvent) => {
        e.stopPropagation();
        const node: any = e.currentTarget;
        if (node.parentNode.parentNode.className !== 'menu-p') {
            onOpenChange([node.getAttribute('data-key'), node.parentNode.parentNode.getAttribute('data-key')])
        } else {
            openKeys([node.getAttribute('data-key')]);
            if (!node.parentNode.parentNode.getAttribute('data-key')) {
                onOpenChange([node.getAttribute('data-key')])
            }
        }
    }
    const createMenu = useCallback((menuObj: any) => {

        /**
           * 递归生成菜单
           * @param menuObj
           * @returns {Array}
           */
        return (
            <ul className='menu-ul' style={{ 'display': menuObj[0].key === defaultKey ? 'block' : 'none' }}>
                {
                    menuObj.map((item: any) => {
                        if (item.childList.length > 0) {
                            return (
                                <li
                                    className={
                                        classNames({
                                            'menu-list': true,
                                            'active-item': item.key === defaultKey
                                        })
                                    }
                                    key={item.key} data-key={item.key} onClick={clickKeys} >
                                    <div className={
                                        classNames({
                                            'menu-item': true,
                                            'active-item': item.key === defaultKey
                                        })} onClick={onMenuClicked}>
                                        <div className='_left_title'>
                                            <SVG xlinkHref={item.icon}></SVG>
                                            {item.name}
                                        </div>
                                        <div className='_right_box'>
                                            ++
                                        </div>
                                    </div>
                                    {createMenu(item.childList)}
                                </li>
                            )
                        } else {
                            return (
                                <li
                                    className={
                                        classNames({
                                            'menu-list': true,
                                            'active-item': item.key === defaultKey
                                        })
                                    }
                                    key={item.key}
                                    data-key={item.key}
                                    onClick={clickKeys}>
                                    <Link to={item.url} className={
                                        classNames({
                                            'menu-item': true,
                                            'active-item': item.key === defaultKey
                                        })
                                    } onClick={onMenuClicked}>
                                        <div className='_left_title'>
                                            <SVG xlinkHref={item.icon}></SVG>
                                            {item.name}
                                        </div>
                                        <div className='_right_box'>

                                        </div>
                                    </Link>
                                </li>
                            )
                        }
                    }
                    )
                }
            </ul >
        )
    }, [clickKeys, defaultKey])
    return (
        <div className='menu-box'>
            {createMenu(menuList)}
        </div>
    )
}

export default Menu
